<!-- pages/index/index.vue -->
<script setup>
import { computed, ref } from 'vue';
import feedList from '@/pages/index/components/feed-list.vue';
import doctorList from '@/pages/index/components/doctor-list.vue';
import { getDoctorListAPI, getKnowledgeListAPI } from '@/apis/doctor';
// 获取安全区域数据
const { safeAreaInsets } = uni.getSystemInfoSync()

const tabIndex = ref(0)

// 标签页数据
const feedTabs = ref([
  {
    label: '推荐',
    type: 'recommend',
    current: 1,
    hasMore: true,
    list: [],
    rendered: true
  },
  {
    label: '关注',
    type: 'like',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  },
  {
    label: '减脂',
    type: 'fatReduction',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  },
  {
    label: '饮食',
    type: 'food',
    current: 1,
    hasMore: true,
    list: [],
    rendered: false
  }
])

// 利用计算属性获取 type 和 current
const feedType = computed(() => feedTabs.value[tabIndex.value].type)
// 记录当前页码
const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current)
// 每一页显示多少数据
const feedPageSize = ref(5)

// 点击切换tab栏
const onChangeIndex = ({index}) => {
	// console.log((e))
	tabIndex.value = index
	// 获取标签页的数据 如果已经加载过了就不用发请求
	if(!feedTabs.value[index].rendered) getKnowledgeList()
	// 做组件缓存,看这个组件是否已经渲染过
	feedTabs.value[index].rendered = true
}

// 发请求获取数据
const getKnowledgeList = async () => {
	uni.showLoading({
					title: '正在加载中....',
					})
	const res = await getKnowledgeListAPI({
		type: feedType.value,
		current: feedCurrent.value,
		pageSize: feedPageSize.value
	})
	console.log(res, 696969)
	// 获取对应的list
	const list = feedTabs.value[tabIndex.value].list
	// 将获取的数据写入到feedTabs中
	feedTabs.value[tabIndex.value].list = [...list, ...res.data.rows]
	// 加载完数据隐藏loading效果
	uni.hideLoading()
	// 更新滚动加载的数据
	const current = feedTabs.value[tabIndex.value].current
	feedTabs.value[tabIndex.value].current = current + 1
	// 判断是否还有更多数据
	feedTabs.value[tabIndex.value].hasMore = current + 1 <= res.data.pageTotal
}

// 滚动加载
const onScrollToLower = () => {
	// 如果hasMore有数据才调用getKnowledgeList函数
	if(feedTabs.value[tabIndex.value].hasMore) getKnowledgeList()
}

getKnowledgeList()

// 存放医生列表数据
const doctorItem = ref([])

// 发请求获取推荐医生列表
const getDoctorList = async () => {
	const res = await getDoctorListAPI()
	console.log(res, 106106)
	doctorItem.value = res.data.rows
}

getDoctorList()

</script>
<template>
  <scroll-page @scrolltolower="onScrollToLower">
    <view
      class="index-page"
      :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
    >
      <!-- 页面导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >优医</view
      >

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-1.png"
          />
          <text class="label">问医生</text>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpkg_consult/quickly/index?type=1"
        >
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-2.png"
          />
          <text class="label">极速问诊</text>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-3.png"
          />
          <text class="label">开药门诊</text>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_medicine/order_list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-1.png"
          />
          <text class="label">药品订单</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_archive/list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-2.png"
          />
          <text class="label">健康档案</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-3.png"
          />
          <text class="label">我的处方</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-4.png"
          />
          <text class="label">疾病查询</text>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image
                class="banner-image"
                src="/static/images/banner-1.png"
                mode="aspectFill"
              />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签页列表 -->
	  <view class="doctor-feeds"
			:style="{ marginTop: -safeAreaInsets.top + 'px' }">
		<custom-sticky :offset-top="safeAreaInsets.top + 'px'">
			<custom-tabs :list="feedTabs" @click="onChangeIndex"></custom-tabs>
		</custom-sticky>
		<!-- 医生列表 -->
		<view class="index-page"
				:style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
		>
				<doctor-list :list="doctorItem" v-show="feedType === 'recommend'"></doctor-list>
		</view>
		<!-- 关注知识列表 -->
		<view v-for="(item, index) in feedTabs"
			:key="item.type"
			v-show="tabIndex === index"
		>
			<feed-list :list="item.list"></feed-list>
		</view>
	  </view>
    </view>
  </scroll-page>
</template>
<style lang="scss">
@import './index.scss';
</style>